<template>
  <div class="CardStageComponent" :style="rootStyle">
    <div class="info">transform: {{ selectedTransform }}</div>
    <div class="offsetMover" :class="{ offsetCenter }">
      <div class="axis axisX"></div>
      <div class="axis axisY"></div>
      <div class="axis axisZ"></div>
      <FlyingCard
        v-for="card in cards"
        :key="card.id"
        :transforms="card.transforms"
        :origin="`${card.originX}% ${card.originY}%`"
        :isfocused="card.id === selected"
        @click="select(card)"
      />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, PropType, computed } from "vue";
import FlyingCard from "./FlyingCard.vue";
import { CardProps } from "@/types/CardProps";
import { transformPropFuncName } from "@/logics/transformPropFuncName";
import { transformPropUnit } from "@/logics/transformPropUnit";

export default defineComponent({
  components: {
    FlyingCard
  },
  props: {
    cards: { default: () => [], type: Array as PropType<CardProps[]> },
    selected: { default: "", type: String },
    perspective: { default: 600, type: Number },
    preserve: { default: false, type: Boolean },
    perspectiveOrigin: { default: "0% 0%", type: String },
    offsetCenter: { default: true, type: Boolean }
  },
  emits: ["update:selected"],
  setup(props, ctx) {
    const rootStyle = computed(() => ({
      perspective: props.perspective + "px",
      transformStyle: props.preserve ? "preserve-3d" : "initial",
      perspectiveOrigin: props.perspectiveOrigin
    }));

    const select = (card: CardProps) => {
      ctx.emit("update:selected", card.id);
    };

    const selectedTransform = computed(() => {
      const card = props.cards.find((c) => c.id === props.selected);
      if (!card) return "";
      return card.transforms.map((t) =>
        `${transformPropFuncName[t.key]}(${t.value}${transformPropUnit[t.key]})`
      ).join(" ");
    });

    return {
      rootStyle,
      select,
      selectedTransform
    };
  }
});
</script>
<style scoped lang="scss">
.CardStageComponent {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-image: url(../assets/grid.svg);
  background-size: 200px;
  background-position: center;

  .info {
    background-color: #FFFFFFCC;
    position: relative;
    z-index: 1;
    padding: 2px 8px;
  }

  .offsetMover {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    transform-style: inherit;

    &.offsetCenter {
      left: 50%;
      top: 50%;
    }
  }

  .axis {
    &.axisX {
      position: absolute;
      width: 100%;
      height: 2px;
      top: -1px;
      left: -50%;
      background-color: skyblue;
    }

    &.axisY {
      position: absolute;
      width: 2px;
      height: 100%;
      left: -1px;
      top: -50%;
      background-color: dodgerblue;
    }

    &.axisZ {
      position: absolute;
      width: 2px;
      height: 100%;
      left: -1px;
      top: -50%;
      background-color: lightblue;
      transform: rotateX(90deg);
    }
  }
}
</style>